<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站！</h1>
        <nav>
            <a href="#about">关于我</a>
            <a href="#projects">我的项目</a>
            <a href="#contact">联系我</a>
        </nav>
    </header>

    <!-- 每日代办事项 -->
    <section id="todo-section">
        <h2>每日代办事项</h2>
        <div id="today-input">
            <input type="text" id="new-task" placeholder="输入新的任务">
            <button id="add-task">添加任务</button>
            <ul id="todo-list"></ul>
        </div>
    </section>

    <!-- 日历打卡模块 -->
    <section id="calendar-section">
        <h2>日历打卡</h2>
        <div id="calendar"></div>
    </section>

    <section id="about">
        <h2>关于我</h2>
        <p>你好！我是一个热爱编程的学生，正在学习如何制作网站。</p>
    </section>

    <section id="projects">
        <h2>我的项目</h2>
        <ul>
            <li>项目1: 个人博客</li>
            <li>项目2: 代办事项应用</li>
            <li>项目3: 天气预报应用</li>
            <li>项目4: 贪吃蛇小游戏</li>
        </ul>
    </section>

    <section id="contact">
        <h2>联系我</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required>
            <br>
            <label for="message">留言</label>
            <textarea id="message" name="message"></textarea>
            <button type="submit">发送</button>
        </form>
    </section>

    <!-- 引入分离的 JS 文件 -->
    <script src="js/calendar.js"></script>
    <script src="js/todo.js"></script>
    <script src="js/form.js"></script>
</body>
</html>
